<template>
	<div v-show="enable" :style="cssVars">
		<Mark/>
		<Context/>
		<Console/>
	</div>
</template>
<script>
	import Vue from 'vue';
	import Mark from '@component/mark/index.vue';
	import Context from '@component/context/index.vue';
	import Console from '@component/console/index.vue';
	// import Element from 'element-ui';
	// Vue.use(Element);
	export default {
		name: 'App',
		components: {
			Mark, Context, Console
		
		},

		data: function(){
			return {
				enable: true
			
			};

		},

		computed: {
			cssVars: function(){
				return {
					'--base-layer': 999999
				};

			}

		},

		methods: {
			handleMouseEvt: function(evtMsg){
				let self = this;
				let event = evtMsg.event;
				let target = evtMsg.event.target;
				if(-1 != event.type.indexOf('click')){
					event.preventDefault();
					return;
				}

			},

		
		},

		beforeCreate: function(){
			Vue.prototype.$bus = this;			
		
		},
		
		mounted: function(){
			console.log('app vue mounted...');
			let self = this;
			self.$bus.$on('app-event', evtMsg => self.$nextTick(() => self.enable = !self.enable));
			self.$bus.$on('mouse-event', evtMsg => self.handleMouseEvt(evtMsg));

		}

	}
</script>